﻿@{
    ViewBag.Title = "沿海风暴潮预警预报微官网";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta charset="utf-8"/>
<style type="text/css">
    html, body {
        color: #222;
        font-family: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
        margin: 0;
        padding: 0;
        text-decoration: none;
    }

    img {
        border: 0;
    }

    ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #eee;
    }

    body .mainmenu:after {
        clear: both;
        content: " ";
        display: block;
    }

    body .mainmenu li {
        float: left;
        margin-left: 2.5%;
        margin-top: 2.5%;
        width: 30%;
        border-radius: 3px;
        overflow: hidden;
    }

    body .mainmenu li a {
        display: block;
        color: #FFF;
        text-align: center;
    }

    body .mainmenu li a b {
        display: block;
        height: 80px;
    }

    body .mainmenu li a img {
        margin: 15px auto 15px;
        width: 50px;
        height: 50px;
    }

    body .mainmenu li a span {
        display: block;
        height: 30px;
        line-height: 30px;
        background-color: #FFF;
        color: #999;
        font-size: 14px;
    }

    body .mainmenu li:nth-child(8n + 1) {
        background-color: #36A1DB;
    }

    body .mainmenu li:nth-child(8n + 2) {
        background-color: #678ce1;
    }

    body .mainmenu li:nth-child(8n + 3) {
        background-color: #8c67df;
    }

    body .mainmenu li:nth-child(8n + 4) {
        background-color: #84d018;
    }

    body .mainmenu li:nth-child(8n + 5) {
        background-color: #14c760;
    }

    body .mainmenu li:nth-child(8n + 6) {
        background-color: #f3b613;
    }

    body .mainmenu li:nth-child(8n + 7) {
        background-color: #ff8a4a;
    }

    body .mainmenu li:nth-child(8n + 8) {
        background-color: #fc5366;
    }

    /*滚动新闻css*/
    .panel li {
        color: #36A1DB;
    }

</style>
<link href="~/Content/Scripts/jquery-newsbox/site.css" rel="stylesheet" />
<script src="~/Content/Scripts/jquery-newsbox/jquery.bootstrap.newsbox.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".newsUpdate").bootstrapNews({
            newsPerPage: 2,
            autoplay: true,
            pauseOnHover: true,
            navigation: false,
            direction: 'down',
            newsTickerInterval: 1500,
            onToDo: function () {
                //console.log(this);
            }
        });
    });
</script>


<div>
    <img src="~/Content/Images/Header.jpg" style="height: 60px; width: 100%"/>
</div>
@*<div style="width: 100%; height: 200px;">
    
</div>*@

<div class="panel panel-default">
    <div class="panel-heading">
        @*position:relative; top:5px; 相对定位 相对于本身位置向下移动5px*@
        <span class="glyphicon glyphicon-list-alt" style="font-size: 24px; position: relative; top: 4px; color: #36A1DB"></span><b style="color: #36A1DB; font-size: 24px; padding-left: 5px">汛情通报</b>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-xs-12">
                <ul class="newsUpdate">
                    <li class="news-item">汛情通报汛情通报汛情通报汛情通报汛情通报汛情通报汛情通报汛情通报汛情通报 </li>
                    <li class="news-item">雨情水情雨情水情雨情水情雨情水情雨情水情雨情水情雨情水情雨情水情雨情水情 </li>
                    <li class="news-item">天气预报天气预报天气预报天气预报天气预报天气预报天气预报天气预报天气预报 </li>
                    <li class="news-item">潮汐预报潮汐预报潮汐预报潮汐预报潮汐预报潮汐预报潮汐预报潮汐预报潮汐预报 </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<div>
    <ul class="mainmenu">
        
        <li><a href="/Water"><b><img src="~/Content/Images/Icons/shuiqing.png" /></b><span>实时水情</span></a></li>
        @*<li><a href="/Image/Index?type=1"><b><img src="~/Content/Images/Icons/taifeng.png" /></b><span>台风路径</span></a></li>*@
        <li><a href="http://typhoon.zjwater.gov.cn/default.aspx"><b><img src="~/Content/Images/Icons/taifeng.png" /></b><span>台风路径</span></a></li>
        <li><a href="/Image/Index"><b><img src="~/Content/Images/Icons/weixing.png" /></b><span>卫星云图</span></a></li>
        <li><a href="/Image/Radar"><b><img src="~/Content/Images/Icons/leida.png" /></b><span>雷达图</span></a></li>
        <li><a href="/Tide"><b><img src="~/Content/Images/Icons/chaoxi2.png" /></b><span>潮汐表</span></a></li>
        <li><a href="/TideForecast"><b><img src="~/Content/Images/Icons/chaoxi.png" /></b><span>潮位预报</span></a></li>
        <li><a href="http://www.typhoon.org.cn/"><b><img src="~/Content/Images/Icons/zhishi.png" /></b><span>台风知识</span></a></li>
        <li><a href="/ForecastProduct"><b><img src="~/Content/Images/Icons/chanpin.png" /></b><span>预报产品</span></a></li>
        <li><a href="http://co.moji.com/api/weather1/index?platform=weixin&lang=zh&type=1
        "><b><img src="~/Content/Images/Icons/tianqi.png" /></b><span>天气预报</span></a></li>
    </ul>
</div>
